<template>
  <div class="blog-container">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="container">
        <div class="header-content">
          <h1 class="blog-title">lin的个人博客</h1>
          <el-menu mode="horizontal" class="nav-menu">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">文章</el-menu-item>
            <el-menu-item index="3">分类</el-menu-item>
            <el-menu-item index="4">关于</el-menu-item>
          </el-menu>
        </div>
      </div>
    </header>

    <!-- 轮播图 -->
    <div class="hero">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
          <img :src="image" alt="轮播图" class="carousel-img">
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 主要内容区域 -->
    <div class="container content-wrapper">
      <div class="main-content">
        <el-card class="article-card" v-for="(article, index) in articles" :key="index">
          <template #header>
            <h2>{{ article.title }}</h2>
          </template>
          <div class="article-meta">
            <span>发布时间：{{ article.date }}</span>
            <span>|</span>
            <span>分类：{{ article.category }}</span>
          </div>
          <p>{{ article.summary }} <el-link :href="article.link">阅读更多</el-link></p>
        </el-card>
      </div>

      <!-- 侧边栏 -->
      <div class="sidebar">
        <el-card class="widget">
          <template #header>
            <h3>关于博主</h3>
          </template>
          <p>大家好，我是lin，一名XTU的学生</p>
        </el-card>

        <el-card class="widget">
          <template #header>
            <h3>文章分类</h3>
          </template>
          <el-menu mode="vertical">
            <el-menu-item v-for="(category, index) in categories" :key="index">{{ category }}</el-menu-item>
          </el-menu>
        </el-card>

        <el-card class="widget">
          <template #header>
            <h3>热门标签</h3>
          </template>
          <el-tag v-for="(tag, index) in tags" :key="index">{{ tag }}</el-tag>
        </el-card>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <p>© 2025年 lin的个人博客 | 联系方式：735894290@qq.com</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      carouselImages: [
        './JPG/RED.jpg',
        './JPG/BLUE.jpg',
        './JPG/WHITE.jpg',
        './JPG/MAHOU.jpg'
      ],
      articles: [
        {
          title: '文章标题 BLOG1',
          date: '2025年6月30日',
          category: '1',
          summary: '这里是文章BLOG1的简要介绍内容，是一个测试blog',
          link: '/blog1'
        },
        {
          title: '文章标题 BLOG2',
          date: '2025年6月30日',
          category: '2',
          summary: '这里是文章BLOG2的简要介绍内容，暂无内容...',
          link: '#'
        },
        {
          title: '文章标题 BLOG3',
          date: '2025年6月30日',
          category: '3',
          summary: '这里是文章BLOG3的简要介绍内容，暂无内容...',
          link: '#'
        }
      ],
      categories: ['分类1', '分类2', '分类3'],
      tags: ['1', '2', '3', '4']
    };
  }
};
</script>

<style scoped>
.blog-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.header {
  background-color: white;
  border-bottom: 1px solid #eee;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.blog-title {
  margin: 0;
  font-size: 24px;
}

.nav-menu {
  border-bottom: none;
}

.hero {
  height: 400px;
  margin-bottom: 30px;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 50px;
}

.main-content {
  flex: 1 1 70%;
  min-width: 300px;
}

.sidebar {
  flex: 1 1 25%;
  min-width: 250px;
}

.widget {
  margin-bottom: 20px;
}

.article-card {
  margin-bottom: 20px;
}

.article-meta {
  margin-bottom: 15px;
  color: #888;
  font-size: 14px;
}

.footer {
  background-color: #f8f9fa;
  padding: 20px 0;
  text-align: center;
  margin-top: auto;
}
</style>